﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>查看图片</title>
    <script src="Scripts/Jquery/jquery-1.10.2.js"></script>
    <script src="Scripts/layer/layer.js"></script>
    <link href="Scripts/layer/skin/layer.css" rel="stylesheet" />
    <script>
        //获取url参数  name:参数名称
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]); return null;
        }
        var url = GetQueryString("imgUrl");
        $(document).ready(function (){
            var html = "";
            for (var i = 0; i < url.split(';').length; i++) {
                html+= "<img src='" + url.split(';')[i] + "'/>";
            }
            $("#img_box").html(html);
        });
        //图片切换
        var box;
        var count = 1;
        var maxcount = url.split(';').length;
        window.onload = function () {
            box = document.getElementById("img_box");
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            if (maxcount < 2) {
                right.style.display = "none";
                left.style.display = "none";
            }
            left.addEventListener("click", _left);
            right.addEventListener("click", _right);
        }
        function _right() {
            var dis = 0;
            if (count < maxcount) {
                dis = count * 500;
                box.style.left = "-" + dis + "px";
                count += 1;
            } else {
                right.disable = false;
                layer.msg("已是最后一张");
            }
        }
        function _left(event) {
            var dis = 0;
            if (count > 1) {
                dis = (2 - count) * 500;
                box.style.left = dis + "px";
                count -= 1;
            } else {
                layer.msg("已经是第一张");
                left.disable = false;
            }
        }

    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .img_box {
            height: 500px;
            position: absolute;
            -moz-transition: 0.5s;
            -webkit-transition: 0.5s;
        }

        img {
            width: 500px;
            height: 500px;
            float: left;
        }
        #ActionButton {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div id="ActionButton">
            <input id="left" class="btn btn-primary Search-R" type="button" value="上一张">
            <input id="right" class="btn btn-primary Search-R" type="button" value="下一张">
        </div>
        <div class="img_box" id="img_box">    
        </div>
    </div>
</body>
</html>
